<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-明星熊猫</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      .title{
        position: absolute;
        background: url(./images/star_title.png);
        width: 232px;
        height: 60px;
        left: 50px;
        top: 30px;
      }
      .number{
        height: 30px;
        width: 30px;
        background: url(./images/star_number.png);
        display: inline-block;
        margin-left: -10px;
      }
      .number-0{
        background-position: 0 0;
      }
      .number-1{
        background-position: 0 -30px;
      }
      .number-2{
        background-position: 0 -60px;
      }
      .number-3{
        background-position: 0 -90px;
      }
      .number-4{
        background-position: 0 -120px;
      }
      .number-5{
        background-position: 0 -150px;
      }
      .number-6{
        background-position: 0 -180px;
      }
      .number-7{
        background-position: 0 -210px;
      }
      .number-8{
        background-position: 0 -240px;
      }
      .number-9{
        background-position: 0 -270px;
      }
      .number-10{
        background-position: 0 -300px;
        margin-left: -5px;
      }
      #info{
        position: absolute;
        left: 50px;
        top: 150px;
        display: none;
      }
      #detail{
        width: 230px;
        height: 320px;
      }
      #visitNum{
        width: 230px;
        text-align: center;
        margin: 20px 0;
      }
      #btn-container{
        position: relative;
        width: 230px;
        height: 80px;
      }
      #btn-container .btn{
        width: 150px;
        height: 50px;
        border-radius: 25px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -75px;
        background: url(./images/star_btn.png);
      }
      #video{
        position: absolute;
        height: 506px;
        width: 900px;
        left: 330px;
        top: 107px;
      }

      #video.focus{
        transform: scale(1);
      }
      #title-container{
        position: absolute;
        z-index: 100;
        height: 50px;
        line-height: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 20px;
        background: url(./images/mark_bg.png) repeat;
        color: #fff;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div class="title"></div>
      <div id="info">
        <div id="detail"></div>
        <div id="visitNum"></div>
        <div id="btn-container">
          <div id="btn" class="btn item"></div>
        </div>
      </div>
      <div id="video" class="item">
        <div id="title-container">
          正在播放： <span id="play_title"></span>
        </div>
       
      </div>
      <div id="volume">
        <div class="volume-container">
          <div id="volume-bar"></div>
        </div>
        <img src="images/controls/volum.png" alt="" />
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/star.js"></script>
    <script src="components/series.js"></script>
    <script src="components/video.js"></script>

    <script>

      var hanlder = {
        btn: function () {
          star.keyEnter()
        },
        video: function () {
          if (!(page.data.series && page.data.series.length)) return dialog.show('当前栏目未绑定节目，请联系管理员')
          try {
            video.destroy()
            video.log()
          } catch (error) {
            
          }
          var form = config.path + '/star.html?elId=video&typeId=' + series.typeId
          var to = config.path + "/live.html?typeId=" + series.typeId
          page.addUrl(to, form)
        }
      }

      function init() {
        page.init()
        getPreFocus()
        renderBg()
        dialog.init()
        star.init()
        log.commit({
          name: '明星熊猫页面',
          type1: 'browse',
          type2: 'star',
          starttime: new Date().getTime(),
        })
      }

      function renderBg () {
        try {
          var picture = page.data.bgs[4].typePicture[0].picPath3
          $("#main").css("background-image", "url(" + picture + ")");
        } catch (err) {
          console.log(err)
        }
      }

      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "");
        var elId = utils.getUrlParam("elId", "btn");
        var dom = document.getElementById(elId || "recommend-0");
        dom && utils.toggleClass(dom);
        star.typeId = typeId
        series.init(typeId)
        
        // utils.auth((page.data.program && page.data.program.code) || '')
        if (page.data.series && page.data.series.length) {
          video.init({
            left: 330,
            abs_left: 326,
            top: 107,
            abs_top: 107,
            width: 908,
            height: 506,
            seriesId: page.data.series[0].ID,
            type: 'live',
            el: '#video'
          })
        }
      }

      function keyUp () {

      }

      function keyDonw () {

      }

      function keyMute () {
       video.toggleMute()
      }

      function keyVolumeUp () {
        video.volumeUp()
      }

      function keyVolumeDown () {
        video.volumeDown()
      }

      function keyLeft () {
        if (!dialog.visible) {
          var dom = move.left();
          dom && utils.toggleClass(dom);
        }
      }

      function keyRight () {
        if (!dialog.visible) {
          var dom = move.right();
          dom && utils.toggleClass(dom);
        }
      }

      function keyEnter () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          var focus = $(".focus")
          var id = focus.attr("id")
          hanlder[id]()
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          try {
            video.destroy()
            video.log()
          } catch (error) {
            
          }
          page.goback()
        }
      }
    </script>
  </body>
</html>
